<template>
  <div class="header">
    <div class="searchbox">
      <router-link class="search" to="search">
        <van-search
          shape="round"
          background="#fff"
          placeholder="请输入搜索关键词"
        />
      </router-link>
    </div>
    <div class="bottom">
      <div class="left">
        <van-sidebar v-model="activeKey" @change="onChange(activeKey)">
          <van-sidebar-item title="推荐" />
          <van-sidebar-item title="拿铁" />
          <van-sidebar-item title="咖啡" />
          <van-sidebar-item title="瑞纳冰" />
          <van-sidebar-item title="水果茶" />
        </van-sidebar>
      </div>
      <div class="natiebox">
        <div class="natie" v-for="(v, k) in data" :key="k">
          <div class="na">
            <div class="n-top">
              <router-link :to="{ path: '/xiangqing', query: { pid: v.pid } }">
                <img :src="v.smallImg" alt="" />
              </router-link>
            </div>
            <div class="n-bottom">
              <div class="name">{{ v.name }}</div>
              <div class="enname">{{ v.enname }}</div>
              <div class="price">￥{{ v.price }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
    <van-tabbar route>
      <van-tabbar-item replace to="/mypage" class="iconfont icon-shouye"
        >首页</van-tabbar-item
      >
      <van-tabbar-item replace to="/mymenu" class="iconfont icon-caidan"
        >菜单</van-tabbar-item
      >
      <van-tabbar-item replace to="/mycart" class="iconfont icon-gouwuche"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item replace to="/mylogin" class="iconfont icon-wodefill"
        v-if="!tokenString">我的</van-tabbar-item
      >
       <van-tabbar-item replace to="/mymine" class="iconfont icon-wodefill"
        v-else>我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>


<style lang="scss" scoped>
.header {
  width: 100%;
  .bottom {
    display: flex;
    .natiebox {
      margin-top: 10px;
      margin-bottom: 50px;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .natie {
        width: 50%;
        display: flex;
        flex-wrap: wrap;
        .na {
          margin-left: 10px;
          .n-top {
            img {
              width: 90%;
              border-radius: 10px;
            }
          }
          .n-bottom {
            width: 100%;
            .name {
              color: #808487;
              font-size: 15px;
            }
            .enname {
              width: 100%;
              color: #808487;
              font-size: 13px;
            }
            .price {
              color: #0c34ba;
              font-size: 15px;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}
</style>

<script>
import myFooter from "@/components/my-footer.vue";
export default {
  name: "mymenu",
  data() {
    return {
      activeKey: 0,
      valueArr: "",
      data: "",
      value: 1,
      type: "isHot",
    };
  },
  components: {
    myFooter,
  },
  methods: {
    getData() {
      let d = {
        appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
      };
      this.axios("/type", {
        method: "GET",
        params: d,
      })
        .then((res) => {})
        .catch((err) => {
          console.log(err);
        });
    },
    onChange(index) {
      this.activeKey = index;
      if (index == 0) {
        this.value = 1;
        this.type = "isHot";
      } else if (index == 1) {
        this.value = "latte";
        this.type = "type";
      } else if (index == 2) {
        this.value = "coffee";
        this.type = "type";
      } else if (index == 3) {
        this.value = "rena_ice";
        this.type = "type";
      } else {
        this.value = "fruit_tea";
        this.type = "type";
      }

      let d = {
        appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
        key: this.type,
        value: this.value,
      };
      this.axios("/typeProducts", {
        method: "GET",
        params: d,
      })
        .then((res) => {
          this.data = res.data.result;
          console.log(this.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    oninit() {
      let d = {
        appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
        key: "isHot",
        value: 1,
      };
      this.axios("/typeProducts", {
        method: "GET",
        params: d,
      })
        .then((res) => {
          this.data = res.data.result;
          console.log(this.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.getData();
    //初始化
    this.oninit();
    if (!this.tokenString) {
      this.tokenString = window.localStorage.getItem("token_list");
      console.log(this.tokenString);
    } else {
      this.tokenString = null;
      console.log(this.tokenString);
    }
  },
};
</script>